<!DOCTYPE html>
<html lang="CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><!--响应式-->
    <title>emmm</title>
    <link rel="stylesheet" href="css/mdui.css">
    <script src="js/mdui.js"></script>
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/vue.js"></script>
    <script src="js/sjcl.js"></script>
    <script src="js/pako.min.js"></script>
    <script src="lib/eruda/eruda.js"></script>
    <script src="lib/crypto-js/crypto-js.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.min.1.7.js"></script>
    <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="js/turn.js"></script>
    <link rel="stylesheet" href="lib/ViewUI/styles/iview.css">
    <script src="lib/ViewUI/iview.min.js"></script>
    <link rel="stylesheet" href="css/basic.css">
    <script>
      eruda.init();
    </script>
    <link href="lib/quasar/quasar.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="q-app" :class="{'mdui-theme-layout-dark':dark}">
      <transition :enter-active-class="animateIn()" :leave-active-class="animateOut()" v-on:after-leave="切换页面回调()" @after-enter="切换页面结束()">
        <!-- 主页面 -->
        <div class="main_page" key="main_page" v-if='pages.main'>
          <!-- 搜索框 -->
          <div class="toolbar">
            <div class="mdui-card searchbar-card">
              <!-- 卡片的内容 -->
              <div class="mdui-card-content searchbar-content">
                <q-btn class="mdui-btn mdui-btn-icon btn_nav" @click="drawer.open();">
                  <i class="mdui-icon material-icons">menu</i>
                </q-btn>
                <q-btn class="mdui-btn mdui-btn-icon btn_menu" @click="transition">
                  <i class="mdui-icon material-icons">more_vert</i>
                  <q-menu :offset="[10,8]" :transition-show="transitionStyle" :transition-hide="transitionStyle">
                    <q-list style="min-width: 100px">
                      <q-item clickable v-close-popup class="mdui-ripple">
                        <q-item-section>
                          <span onclick="setDark();" v-if="!dark" class="text-autoDark">
                            <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">brightness_4</i>黑夜模式
                          </span>
                          <span onclick="setDark();" v-if="dark" class="text-autoDark">
                            <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">brightness_7</i>白昼模式
                          </span>
                        </q-item-section>
                      </q-item>
                      <q-separator></q-separator>
                      <q-item clickable v-close-popup class="mdui-ripple">
                        <q-item-section>
                          <span @click="退出APP()" class="text-autoDark">
                            <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">exit_to_app</i>退出
                          </span>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-btn>
                <div class="searchbar">
                  <div v-if='(toolbar=="search")'>
                    <div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
                      <button class="mdui-textfield-icon mdui-btn mdui-btn-icon" v-ripple>
                        <i class="mdui-icon material-icons mdui-text-color-theme-text" id="search_btn">search</i>
                      </button>
                      <input class="mdui-textfield-input" style="padding-right:0;" type="text" placeholder="搜索一下"/>
                      <button class="mdui-textfield-close mdui-btn mdui-btn-icon" v-ripple>
                        <i class="mdui-icon material-icons">close</i>
                      </button>
                    </div>
                  </div>
                  <div class="titlebar" v-if='(toolbar=="title")'>
                    {{title}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 主体 -->
          <div class="mdui-card tab-body">
            <!-- 卡片的内容 -->
            <div class="mdui-card-content tab_content">
              <q-tabs v-model="tab" align="justify" class="mdui-color-theme mdui-text-color-theme-text shadow-2" :breakpoint="0" >
                <q-tab name="bookshelf" label="我的书架"></q-tab>
                <q-tab name="find" label="发现"></q-tab>
              </q-tabs>
              <q-tab-panels v-model="tab" keep-alive animated swipeable infinite>
                <q-tab-panel name="bookshelf">
                  <div id="bookshelf_content" style="height:100%;">
                    <Scroll :on-reach-top="刷新书架" :height="加载滑动UI()" loading-text="正在加载" key="书架">
                      <div v-if="!isBookshelfNull" class="bookshelfContent">
                        <q-list style="width:100%;">
                          <q-expansion-item popup icon="library_books" :label="book.book_title" :caption="book.chapter_name" v-for="book,name,index in bookshelf" :key="book.id" group="bookshelf" @show="加载书籍简介(book.id,book.book_code)" >
                            <q-separator></q-separator>
                            <q-card>
                              <q-card-section>
                                <!-- 书籍简介 -->
                                <div style="width:100%;position:relative;">
                                  <div v-if="!book.loading">
                                    <q-badge class="bookTag" color="autoDark" outline>
                                      作者：{{book.info.writer}} <q-icon name="account_circle" color="autoDark" class="q-ml-xs" />
                                    </q-badge>
                                    <q-badge class="bookTag" color="autoDark" outline>
                                      更新时间：{{book.info.time}} <q-icon name="access_time" color="autoDark" class="q-ml-xs" />
                                    </q-badge>
                                    <q-badge class="bookTag" color="autoDark" outline>
                                      评分：{{book.info.star}} <q-icon name="stars" color="autoDark" class="q-ml-xs" />
                                    </q-badge>
                                    <q-badge class="bookTag" color="autoDark" outline>
                                      评分人数：{{book.info.starPeople}} <q-icon name="cloud_circle" color="autoDark" class="q-ml-xs" />
                                    </q-badge>
                                    <q-badge class="bookTag" color="autoDark" outline>
                                      我的评分：{{book.info.myStar}} <q-icon name="group_work" color="autoDark" class="q-ml-xs" />
                                    </q-badge>
                                    <pre style="margin:0;white-space: break-spaces;">{{book.info.synopsis}}</pre>
                                  </div>
                                  <q-inner-loading :showing="book.loading">
                                    <q-spinner-gears size="50px" color="primary" />
                                  </q-inner-loading>
                                  <!-- 加载时占位 -->
                                  <div style="height:20vh" v-if="book.loading"></div>
                                </div>
                                <div class="row">
                                  <div class="col">
                                    <!--<button class="mdui-btn mdui-btn-raised mdui-ripple" style="width:100%;min-width:unset;" v-ripple>删除</button>-->
                                    <q-btn @click="删除书籍(book);" label="删除书籍" :loading="book.delloading" class="mdui-btn mdui-btn-raised mdui-ripple" style="width:100%;min-width:unset;">
                                      <template v-slot:loading>
                                        <q-spinner-pie class="on-left"></q-spinner-pie>
                                        请稍候
                                      </template>
                                    </q-btn>
                                  </div>
                                  <div class="col">
                                    <!--<button class="mdui-btn mdui-btn-raised mdui-ripple" style="width:100%;min-width:unset;" v-ripple @click="开始阅读(book);">开始阅读</button>-->
                                    <q-btn @click="开始阅读(book);" label="开始阅读" :loading="book.readloading" class="mdui-btn mdui-btn-raised mdui-ripple" style="width:100%;min-width:unset;">
                                      <template v-slot:loading>
                                        <q-spinner-pie class="on-left"></q-spinner-pie>
                                        请稍候
                                      </template>
                                    </q-btn>
                                  </div>
                                </div>
                              </q-card-section>
                            </q-card>
                          </q-expansion-item>
                        </q-list>
                      </div>
                      <div class="bookshelfTip" v-if="isBookshelfNull" style="width: 100%;height: 100%;position: relative;">
                        <p style="text-align: center;position: absolute;top: 50%;transform: translateY(-50%);width: 100%;">暂无书籍</p>
                      </div>
                    </Scroll>
                  </div>
                </q-tab-panel>
                <q-tab-panel name="find">
                  <div id="find_content" style="height:100%;">
                    <Scroll :on-reach-top="刷新发现" :on-reach-bottom="加载更多发现" :height="加载滑动UI()" loading-text="正在加载" key="发现">
                      <div class="findContent">
                        <q-chip icon="blur_circular" size="13px">分类</q-chip>
                        <div class="row">
                          <div class="col-3 col" v-for="sort in sorts">
                            <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-btn-dense" style="width:100%;min-width:unset;" v-ripple>{{sort.sort_name}}</button>
                          </div>
                        </div>
                        <q-chip icon="blur_linear" size="13px">标签</q-chip>
                        <div class="row">
                          <div class="col-3 col" v-for="tag in tags">
                            <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-btn-dense" style="width:100%;min-width:unset;" v-ripple>{{tag.tag_name}}</button>
                          </div>
                        </div>
                        <q-chip icon="blur_on" size="13px">热榜</q-chip>
                        <div class="row">
                          <div class="col-3 col" v-for="chart in charts">
                            <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-btn-dense" style="width:100%;min-width:unset;" v-ripple>{{chart.chart_name}}</button>
                          </div>
                        </div>
                        <q-chip icon="center_focus_weak" size="13px">最新</q-chip>
                        <q-list>
                          <q-expansion-item
                            popup
                            icon="library_books"
                            :label="book.book_title"
                            :caption="book.sort_name"
                            v-for="book in lastBooks"
                            :key="book.id"
                            group="bookshelf"
                          >
                            <q-separator></q-separator>
                            <q-card>
                              <q-card-section>
                                <!-- 书籍简介 -->
                                <div style="width:100%;position:relative;">
                                  <p>{{book.synopsis}}</p>
                                  <q-inner-loading :showing="book.loading">
                                    <q-spinner-gears size="50px" color="primary" />
                                  </q-inner-loading>
                                  <!-- 加载时占位 -->
                                  <div style="height:20vh" v-if="book.loading"></div>
                                </div>
                                <div class="row">
                                  <div class="col">
                                    <button class="mdui-btn mdui-btn-raised mdui-ripple" style="width:100%;min-width:unset;" v-ripple>加入书架</button>
                                  </div>
                                  <div class="col">
                                    <button class="mdui-btn mdui-btn-raised mdui-ripple" style="width:100%;min-width:unset;" v-ripple>开始阅读</button>
                                  </div>
                                </div>
                              </q-card-section>
                            </q-card>
                          </q-expansion-item>
                        </q-list>
                      </div>
                    </Scroll>
                  </div>
                </q-tab-panel>
              </q-tab-panels>
            </div>
          </div>
          <!-- 输入验证码提示 -->
          <q-dialog v-model="阅读.验证码">
            <q-card style="padding:2vmin">
              <div>
                <q-card-section>
                  <div class="text-h6">请输入验证码</div>
                </q-card-section>
                <q-card-section class="q-pt-none">
                  由于小屋的限制，在查看没有书签的书籍时需要先输入验证码，敬请谅解
                  <br>
                  <br>
                </q-card-section>
                <q-card-section class="q-pt-none">
                  <div style="padding-right:calc(var(--e-depth) * 1.5);position:relative;">
                    <q-input class="wel_input" dense outlined v-model="阅读.验证码内容" label="请输入验证码" hint="" :error-message="阅读.验证码验证消息" :error="阅读.验证码验证" style="margin-right: 102px;padding:0;"></q-input>
                    <img class="verImg" style="padding: var(--e-depth);position: absolute;top: 1vmin;right: 1vmin;" :src="阅读.验证码图片" @click="阅读验证码()" onload="window.URL.revokeObjectURL(this.src);" width="102" height="40">
                  </div>
                </q-card-section>
                <q-card-actions align="right">
                  <q-btn @click="加载章节代码()" label="完成" color="autoLight" :loading="阅读.章节代码加载" style="padding:0 6vmin" class="mdui-ripple">
                    <template v-slot:loading>
                      <q-spinner-pie class="on-left"></q-spinner-pie>
                      请稍候
                    </template>
                  </q-btn>
                </q-card-actions>
              </div>
            </q-card>
          </q-dialog>
        </div>
        <!-- 欢迎页 -->
        <div class="welcome_page" key="welcome_page" v-if='pages.welcome'>
          <q-stepper v-model="welcome.step" color="autoLight" animated class="wel_stepper">
            <q-step :name="1" title="欢迎" icon="layers" :done="welcome.done1" >
              <p>欢迎使用emmm，本APP内将不会预储存任何信息，仅提供解析功能，望谅解！</p>
              <p>域码是经过加密的网站域名，用于emmm用户间相互分享，所有域码均由用户自主生成，与emmm无关</p>
              <q-input class="wel_input" outlined v-model="welcome.code" label="请输入域码" hint="每个域码的有效期只有一天哦" :error-message="welcome.域码验证消息" :error="welcome.域码验证"></q-input>
              <q-stepper-navigation>
                <q-btn @click="欢迎页验证域码()" color="autoLight" label="下一步" :loading="welcome.progress1" class="mdui-ripple">
                  <template v-slot:loading>
                    <q-spinner-pie class="on-left"></q-spinner-pie>
                    连接中
                  </template>
                </q-btn>
              </q-stepper-navigation>
            </q-step>
            <q-step :name="2" title="登录" icon="group_add" :done="welcome.done2" >
              <div class="login_card">
                <transition :enter-active-class="animateIn()" :leave-active-class="animateOut()" v-on:after-leave="欢迎页动画回调()">
                  <div key="登录" class="mdui-card" style="margin:0;" v-if='welcome.是否登录'>
                    <!-- 卡片的内容 -->
                    <div class="mdui-card-content">
                      <div style="display:flex;margin-bottom:16px;">
                        <q-chip>
                          <q-avatar icon="bookmark" color="autoLight" text-color="white"></q-avatar>
                          登录
                        </q-chip>
                        <q-space></q-space>
                        <q-chip icon="assignment_ind" dense style="margin: calc(7px - 0.5vmin);" onclick="app.欢迎页切换注册()" color="autoLight" class="mdui-ripple">
                          前往注册
                        </q-chip>
                      </div>
                      <q-input class="wel_input" dense outlined v-model="welcome.账号" label="请输入小屋账号" hint="" :error-message="welcome.账号验证消息" :error="welcome.账号验证"></q-input>
                      <q-input class="wel_input" dense :type="welcome.密码可见 ? 'password' : 'text'" outlined v-model="welcome.密码" label="请输入密码" :error-message="welcome.密码验证消息" :error="welcome.密码验证">
                        <template v-slot:append>
                          <q-icon :name="welcome.密码可见 ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="welcome.密码可见 = !welcome.密码可见"></q-icon>
                        </template>
                      </q-input>
                      <div style="padding-right:calc(102px + 2vmin);position:relative;">
                        <q-input class="wel_input" dense outlined v-model="welcome.验证码" label="验证码" hint="" :error-message="welcome.验证码验证消息" :error="welcome.验证码验证"></q-input>
                        <img class="verImg" style="padding: calc(var(--e-depth) * 1.5);position: absolute;top: 1vmin;right: 1vmin;" :src="welcome.验证码图片" @click="欢迎页验证码()" onload="window.URL.revokeObjectURL(this.src);" width="102" height="40">
                      </div>
                    </div>
                  </div>
                  <div key="注册" class="mdui-card" style="margin:0;" v-if='welcome.是否注册'>
                    <!-- 卡片的内容 -->
                    <div class="mdui-card-content">
                      <div style="display:flex;margin-bottom:16px;">
                        <q-chip>
                          <q-avatar icon="bookmark" color="autoLight" text-color="white"></q-avatar>
                          注册
                        </q-chip>
                        <q-space></q-space>
                        <q-chip icon="assignment_ind" dense style="margin: calc(7px - 0.5vmin);" onclick="app.欢迎页切换登录()" color="autoLight" class="mdui-ripple">
                          前往登录
                        </q-chip>
                      </div>
                      <q-input class="wel_input" dense outlined v-model="welcome.账号" label="请输入账号" :error-message="welcome.账号验证消息" :error="welcome.账号验证"></q-input>
                      <q-input class="wel_input" dense :type="welcome.密码可见 ? 'password' : 'text'" outlined v-model="welcome.密码" label="请输入密码" :error-message="welcome.密码验证消息" :error="welcome.密码验证">
                        <template v-slot:append>
                          <q-icon :name="welcome.密码可见 ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="welcome.密码可见 = !welcome.密码可见"></q-icon>
                        </template>
                      </q-input>
                      <q-input class="wel_input" dense :type="welcome.重复密码可见 ? 'password' : 'text'" outlined v-model="welcome.重复密码" label="请重复一遍密码" :error-message="welcome.重复密码验证消息" :error="welcome.重复密码验证">
                        <template v-slot:append>
                          <q-icon :name="welcome.重复密码可见 ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="welcome.重复密码可见 = !welcome.重复密码可见"></q-icon>
                        </template>
                      </q-input>
                      <div style="padding-right:calc(var(--e-depth) * 1.5);position:relative;">
                        <q-input class="wel_input" dense outlined v-model="welcome.验证码" label="验证码" hint="" :error-message="welcome.验证码验证消息" :error="welcome.验证码验证"></q-input>
                        <img class="verImg" style="padding: var(--e-depth);position: absolute;top: 1vmin;right: 1vmin;" :src="welcome.验证码图片" @click="欢迎页验证码()" onload="window.URL.revokeObjectURL(this.src);" width="102" height="40">
                      </div>
                    </div>
                  </div>
                </transition>
              </div>
              <q-stepper-navigation>
                <q-btn @click="欢迎页账号()" color="autoLight" label="下一步" class="mdui-ripple" :loading="welcome.progress2">
                  <template v-slot:loading>
                    <q-spinner-pie class="on-left"></q-spinner-pie>
                    连接中
                  </template>
                </q-btn>
                <q-btn flat @click="welcome.step = 1" color="autoLight" label="返回" class="q-ml-sm mdui-ripple"></q-btn>
              </q-stepper-navigation>
            </q-step>
            <q-step :name="3" title="开始" icon="beenhere" :done="welcome.done3" >
              <p>最后一步了！为你的emmm设置一个启动密码，以防尴尬哦！[手动滑稽]</p>
              <q-input class="wel_input" :type="welcome.启动密码可见 ? 'password' : 'text'" outlined v-model="welcome.启动密码" label="请输入启动密码" :error-message="welcome.启动密码验证消息" :error="welcome.启动密码验证">
                <template v-slot:append>
                  <q-icon :name="welcome.启动密码可见 ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="welcome.启动密码可见 = !welcome.启动密码可见"></q-icon>
                </template>
              </q-input>
              <q-stepper-navigation>
                <q-btn @click="欢迎页启动密码()" color="autoLight" label="下一步" class="mdui-ripple" :loading="welcome.progress3">
                  <template v-slot:loading>
                    <q-spinner-pie class="on-left"></q-spinner-pie>
                    设置中
                  </template>
                </q-btn>
                <q-btn flat @click="welcome.step = 2" color="autoLight" label="返回" class="q-ml-sm mdui-ripple"></q-btn>
              </q-stepper-navigation>
            </q-step>
          </q-stepper>
          <q-dialog v-model="welcome.alert">
            <q-card style="padding:2vmin">
              <div>
                <q-card-section>
                  <div class="text-h6">说明</div>
                </q-card-section>
                <q-card-section class="q-pt-none">
                  由于emmm部分功能依赖于小屋的账号系统，所以使用emmm前必须先登录或注册一个小屋账号。
                </q-card-section>
                <q-card-actions align="right">
                  <q-btn flat label="我知道了" color="autoLight" v-close-popup class="mdui-ripple"></q-btn>
                </q-card-actions>
              </div>
            </q-card>
          </q-dialog>
        </div>
        <!-- 密码页 -->
        <div class="passwd_page" key="passwd_page" v-if='pages.passwd'>
          <div class="passwd_card">
            <div class="mdui-card" style="margin:0;">
              <!-- 卡片的内容 -->
              <div class="mdui-card-content">
                <div style="text-align:center; margin-bottom: 4vmin;">
                  <q-chip style="font-size: 6vmin; border-radius: 200000px;">
                    欢迎回来
                  </q-chip>
                </div>
                <q-input class="wel_input" :type="passwd.可见 ? 'password' : 'text'" outlined v-model="passwd.密码" label="请输入密码" :error-message="passwd.验证消息" :error="passwd.验证">
                  <template v-slot:append>
                    <q-icon :name="passwd.可见 ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="passwd.可见 = !passwd.可见"></q-icon>
                  </template>
                </q-input>
                <div style="text-align:center">
                  <q-btn @click="解锁()" color="autoLight" label="确认" class="mdui-ripple" style="padding:0 8vmin;" :loading="passwd.加载">
                    <template v-slot:loading>
                      <q-spinner-pie class="on-left"></q-spinner-pie>
                      请稍后
                    </template>
                  </q-btn>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 阅读页 -->
        <div class="read_page" key="read_page" v-if='pages.read'>
          <!--<div class="flipbook_pages">
            <div class="testPage">
              <div class="flipReadPage">
                <div class="flipReadPage_content">
                  <div class="page_content">
                    <h1 v-if="read.testPage.hasTitle">{{read.testPage.book_title}}</h1>
                    <h2 v-if="read.testPage.hasTitle">{{read.testPage.chapter_name}}</h2>
                    <p v-for="inner,name,index in read.testPage.inner" :key="index">{{inner}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="realPages">
              <div class="realPage" v-for="page,name,index in read.realPages" :key="index" :id="index">
                <div class="flipReadPage">
                  <div class="flipReadPage_content">
                    <div class="page_content">
                      <h1 v-if="page.hasTitle">{{page.book_title}}</h1>
                      <h2 v-if="page.hasTitle">{{page.chapter_name}}</h2>
                      <p v-for="inner,name,index in page.inner" :key="index">{{inner}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flipbook-viewport" style="width:100%;height:100%;overflow:hidden;">
            <div style="width:100%;height:100%;">
              <div class="flipbook" style="width:100%;height:100%;left:0;top:0;">
                <div>
                  <div class="flipReadPage">
                    <div class="flipReadPage_content">
                      <div class="page_content">
                        <h1>不好意思，现在不支持查看上一章</h1>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>-->
          <!--<div @touchmove.stop @touchend="阅读菜单()" @click="阅读菜单()" style="position: fixed;width: 50%;height: 50%;border-radius: 100000px;background: rgba(255, 255, 0, 0);top: 50%;left: 50%;z-index: 46;transform: translate(-50%, -50%);"></div>-->
          <div @click="阅读菜单()" class="slidePage" id="slidePage">
            <Scroll :on-reach-top="加载上一章" :on-reach-bottom="加载下一章" :height="加载滑动阅读UI()" loading-text="加载中" key="slideRead">
              <div class="readContent">
                <div class="chapter" v-for="chapter in 滑动阅读">
                  <h2>{{chapter.chapter_name}}</h2>
                  <p v-for="inner,name,index in chapter.inner" :key="index">{{inner}}</p>
                </div>
              </div>
            </Scroll>
          </div>
          <transition :enter-active-class="animateIn()" :leave-active-class="animateOut()">
            <!--<div @touchmove.stop @touchend="关闭阅读提示()" v-if='read.first' style="position: fixed;width: 100%;height: 100%;background: var(--e-back);opacity: 0.8;top: 0px;left: 0px;z-index: 47;box-sizing: border-box;border: var(--e-face) 1vmin solid;">
              <div style="position: absolute;width: 50%;height: 50%;border-radius: 100000px;top: 50%;left: 50%;transform: translate(-50%, -50%);border: var(--e-face) 1vmin solid;box-sizing: border-box;">
                <div style="position:absolute;top:50%;left:50%;width:100%;text-align:center;transform:translate(-50%,-50%);color:var(--e-face);font-size:10vw;">菜单</div>
              </div>
              <div style="height: calc(25% + 1vmin);width: 1vmin;position: absolute;left: 50%;top: 0;transform: translateX(-50%);background: var(--e-face);"></div>
              <div style="height: calc(25% + 1vmin);width: 1vmin;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);background: var(--e-face);"></div>
              <div style="position: absolute;top: 50%;transform: translate(-50%,-50%);color: var(--e-face);font-size: 10vw;left: 12.5%;">
                上<br>一<br>页
              </div>
              <div style="position: absolute;top: 50%;transform: translate(50%,-50%);color: var(--e-face);font-size: 10vw;right: 12.5%;">
                下<br>一<br>页
              </div>
            </div>-->
            <div @touchmove.stop @click="关闭阅读菜单()" v-if="read.nav" style="position: fixed;top: 0;left:0;z-index:47;width:100%;height:100%;">
              <div class="toolbar" @touchend.stop>
                <div class="mdui-card searchbar-card">
                  <!-- 卡片的内容 -->
                  <div class="mdui-card-content searchbar-content">
                    <q-btn class="mdui-btn mdui-btn-icon btn_nav" @click="退出阅读页()">
                      <i class="mdui-icon material-icons">arrow_back</i>
                    </q-btn>
                    <q-btn class="mdui-btn mdui-btn-icon btn_menu" @click="transition">
                      <i class="mdui-icon material-icons">more_vert</i>
                      <q-menu :offset="[10,8]" :transition-show="transitionStyle" :transition-hide="transitionStyle">
                        <q-list style="min-width: 100px">
                          <q-item clickable v-close-popup class="mdui-ripple">
                            <q-item-section>
                              <span onclick="setDark();" v-if="!dark" class="text-autoDark">
                                <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">brightness_4</i>黑夜模式
                              </span>
                              <span onclick="setDark();" v-if="dark" class="text-autoDark">
                                <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">brightness_7</i>白昼模式
                              </span>
                            </q-item-section>
                          </q-item>
                          <q-separator></q-separator>
                          <q-item clickable v-close-popup class="mdui-ripple">
                            <q-item-section>
                              <span @click="退出APP()" class="text-autoDark">
                                <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">exit_to_app</i>退出
                              </span>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-btn>
                    <div class="searchbar">
                      <div class="titlebar">
                        {{title}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="toolbar" style="top:unset;bottom:0;" @touchend.stop>
                <div class="mdui-card searchbar-card">
                  <!-- 卡片的内容 -->
                  <div class="mdui-card-content searchbar-content">
                    <q-btn class="mdui-btn mdui-btn-icon btn_nav" @click="drawer.open();">
                      <i class="mdui-icon material-icons">arrow_back</i>
                    </q-btn>
                    <q-btn class="mdui-btn mdui-btn-icon btn_menu" @click="transition">
                      <i class="mdui-icon material-icons">more_vert</i>
                      <q-menu :offset="[10,8]" :transition-show="transitionStyle" :transition-hide="transitionStyle">
                        <q-list style="min-width: 100px">
                          <q-item clickable v-close-popup class="mdui-ripple">
                            <q-item-section>
                              <span onclick="setDark();" v-if="!dark" class="text-autoDark">
                                <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">brightness_4</i>黑夜模式
                              </span>
                              <span onclick="setDark();" v-if="dark" class="text-autoDark">
                                <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">brightness_7</i>白昼模式
                              </span>
                            </q-item-section>
                          </q-item>
                          <q-separator></q-separator>
                          <q-item clickable v-close-popup class="mdui-ripple">
                            <q-item-section>
                              <span @click="退出APP()" class="text-autoDark">
                                <i class="mdui-menu-item-icon mdui-icon material-icons text-autoDark" style="font-size: 24px;">exit_to_app</i>退出
                              </span>
                            </q-item-section>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-btn>
                    <div class="searchbar">
                      <div class="titlebar">
                        {{title}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </transition>
      <!-- 侧滑栏 -->
      <div class="mdui-drawer mdui-drawer-close" id="drawer" v-if="enableDrawer">
        <div class="app_name">{{app_name}}</div>
        <div class="app_version">{{app_version}}</div>
        <q-separator></q-separator>
      </div>
      <div @touchmove.stop id="read_disableDrawer" style="position: fixed;width: 26px;height: 100%;background: rgba(0, 0, 0, 0);top: 0;left: 0;z-index: 9999;"></div>
    </div>
    <script src="lib/quasar/quasar.umd.min.js"></script>
    <script src="lib/quasar/lang/zh-hans.umd.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
